<template>
	<view class="container" :class="'theme-'+theme">
		<view class="addTitle">
			<view class="titleDetail">
				<view class="titleLeft">
					<image src="../../static/newh5/fanhui.png" class="yticon"
						style="width: 13px;height: 20px;color:black" @click="returnIndex()"></image>
				</view>
				<view class="titleCenter">
					<b class="titleText">通知公告</b>
				</view>
				<view class="titleRight" style="color: #269cd3;flex:1"> </view>
			</view>
		</view>
		<!-- <text>通知公告详情</text> -->
		<view class="info">
			<!-- 标题展示 -->
			<b class="title">{{content.title}}</b>
			<view class="hint">
				<text>
					<u-icon name="clock-fill" style="margin-right: 4rpx;"></u-icon>{{content.issueDate| datefmt}}
				</text>
			<!-- 	<text>
					{{ content.deptName }}{{ content.createUser }}
				</text> -->
				<text>
					<u-icon name="eye-fill" style="margin-right: 4rpx;"></u-icon>{{content.pageViews}}次
				</text>
			</view>
		</view>
		<view class="exp-list">
			<view class="list-flex" style="display: flex">
				<view class="title-list">项目基本信息</view>
				<!--          <text style="font-size: 12px;color: #999;line-height: 20px;margin-left: 5px">(该地址是供应商上门取旧商品的地址)</text>-->
			</view>
			<template v-if="type == 'order'">
				<view class="line-list">
					<view class="list-flex">
						订单编号：
						<text style="margin-left: 10px">{{orderData.sn}}</text>
					</view>
				</view>
				<view class="line-list">
					<text>采购单位：<text style="margin-left: 10px">{{orderData.deptNameNew}}</text></text>
				</view>
				<view class="line-list">
					<text>采购人名称：<text style="margin-left: 10px">{{orderData.userNameNew}}</text></text>
				</view>
				<view class="line-list">
					<text>供应商名称：<text style="margin-left: 10px">{{orderData.supplierName}}</text></text>
				</view>
				<view class="line-list">
					<text>订单备注：<text style="margin-left: 10px">**********</text></text>
				</view>
			</template>
			<template v-if="type == 'parity'">
				<view class="line-list">
					<view class="list-flex" v-if="biddingData.personList">
						采购人姓名：
						<text style="margin-left: 10px">{{biddingData.personList[0].person}}</text>
					</view>
					<view class="line-list">
						<text>采购单位：<text style="margin-left: 10px">{{content.deptName}}</text></text>
					</view>
				</view>
			</template>
			<template v-if="type == 'bidding'">
				<view class="line-list">
					<view class="list-flex" v-if="biddingData.person">
						采购人姓名：
						<text style="margin-left: 10px">{{biddingData.person}}</text>
					</view>
					<view class="line-list">
						<text>采购单位：<text style="margin-left: 10px">{{content.deptName}}</text></text>
					</view>
				</view>
			</template>
			<template v-if="type == 'result'">
				<view class="line-list">
					<view class="list-flex">
						订单编号：：
						<text style="margin-left: 10px">{{ orderResultSn?orderResultSn:resultData.projectNum }}</text>
					</view>
					<view class="line-list">
						<text>采购单位：<text style="margin-left: 10px">{{content.deptName}}</text></text>
					</view>
					<view class="line-list">
						<text>采购人名称：<text
								style="margin-left: 10px">{{ resultData.userName.substr(0,1) +resultData.userName.substr(1,resultData.userName.length).replace(/./g,'*')}}</text></text>
					</view>
					<view class="line-list">
						<text>供应商名称：<text style="margin-left: 10px">{{resultData.supplierName}}</text></text>
					</view>
					<view class="line-list">
						<text>订单备注：<text style="margin-left: 10px">**********</text></text>
					</view>
				</view>
			</template>
			<!--			<textarea v-model="exp" placeholder-class="ph" placeholder="请填写说明信息" class="orderData"></textarea>-->
		</view>
		<template v-if="type == 'order'">
			<view class="product-list">
				<!-- class="item"  -->
				<view class="item" v-for="(item,index) in orderData.items" :key="index"
					>
					<view class="left">
						<image :src="item.thumbnail"></image>
					</view>
					<view class="right">
						<view class="name">
							<text>{{item.productName}}</text>
						</view>
						<view class="bottom">
							<view class="price">
								<text class="wordClass">￥{{item.salePrice|money}}</text>
							</view>
							<view class="num">
								<text class="wordClass">&#10005; {{item.num}} {{item.unit}}</text>
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="total">
				<view class="total-l">
					<text class="l-word">商品总额</text>
					<text class="l-p wordClass">￥{{summary.totalPrice|twoBitMoney}}</text>
				</view>
				<view class="total-l">
					<text class="l-word">运费总计</text>
					<text class="l-p wordClass">￥{{summary.freight|twoBitMoney}}</text>
				</view>
				<view class="total-l">
					<text class="l-word">订单总额</text>
					<text class="l-p wordClass" style="color: red;">￥{{summary.amount|twoBitMoney}}</text>
				</view>
				<!-- <view class="time">
					<text>下单时间：{{order.createTime}}</text>
				</view> -->
			</view>
		</template>
		<template v-if="type == 'result'">
			<view class="product-list">
				<!-- class="item"  -->
				<view class="item" v-for="(item,index) in resultProductList" :key="index">
					<view class="left">
						<image :src="record.logoUrl?record.logoUrl:defaultImg"></image>
					</view>
					<view class="right">
						<view class="name">
							<text>{{item.sku}}{{item.productName}}</text>
						</view>
						<view class="bottom">
							<view class="price">
								<text class="wordClass"></text>
							</view>
							<view class="num">
								<text class="wordClass">&#10005; {{item.num}} {{item.unit}}</text>
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="total">
				<view class="total-l">
					<text class="l-word">商品总额</text>
					<text class="l-p wordClass">￥{{summary.totalPrice|twoBitMoney}}</text>
				</view>
				<view class="total-l">
					<text class="l-word">运费总计</text>
					<text class="l-p wordClass">￥{{summary.freight|twoBitMoney}}</text>
				</view>
				<view class="total-l">
					<text class="l-word">订单总额</text>
					<text class="l-p wordClass" style="color: red;">￥{{summary.amount|twoBitMoney}}</text>
				</view>
				<!-- <view class="time">
					<text>下单时间：{{order.createTime}}</text>
				</view> -->
			</view>
		</template>
		<template v-if="type == 'parity'">
			<view class="product-list">
				<!-- class="item"  -->
				<view class="item" v-for="(item,index) in biddingData.productList" :key="index">
					<view class="left">
						<image :src="defaultImg"></image>
					</view>
					<view class="right">
						<view class="name">
							<text>{{item.sku}}{{item.productName}}</text>
						</view>
						<view class="bottom">
							<view class="price">
								<text class="wordClass"></text>
							</view>
							<view class="num">
								<text class="wordClass">&#10005; {{item.num}} {{item.unit}}</text>
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="total">
				<view class="total-l">
					<text class="l-word">商品总额</text>
					<text class="l-p wordClass">￥{{summary.totalPrice|twoBitMoney}}</text>
				</view>
				<view class="total-l">
					<text class="l-word">运费总计</text>
					<text class="l-p wordClass">￥{{summary.freight|twoBitMoney}}</text>
				</view>
				<view class="total-l">
					<text class="l-word">订单总额</text>
					<text class="l-p wordClass" style="color: red;">￥{{summary.amount|twoBitMoney}}</text>
				</view>
				<!-- <view class="time">
					<text>下单时间：{{order.createTime}}</text>
				</view> -->
			</view>
		</template>
		<template v-if="type == 'bidding'">
			<view class="product-list">
				<!-- class="item"  -->
				<view class="item" v-for="(item,index) in biddingData.productList" :key="index">
					<view class="left">
						<image :src="defaultImg"></image>
					</view>
					<view class="right">
						<view class="name">
							<text>{{item.sku}}{{item.productName}}</text>
						</view>
						<view class="bottom">
							<view class="price">
								<text class="wordClass"></text>
							</view>
							<view class="num">
								<text class="wordClass">&#10005; {{item.num}} {{item.unit}}</text>
							</view>
						</view>
					</view>
				</view>
		
			</view>
			<view class="total">
				<view class="total-l">
					<text class="l-word">商品总额</text>
					<text class="l-p wordClass">￥{{summary.totalPrice|twoBitMoney}}</text>
				</view>
				<view class="total-l">
					<text class="l-word">运费总计</text>
					<text class="l-p wordClass">￥{{summary.freight|twoBitMoney}}</text>
				</view>
				<view class="total-l">
					<text class="l-word">订单总额</text>
					<text class="l-p wordClass" style="color: red;">￥{{summary.amount|twoBitMoney}}</text>
				</view>
				<!-- <view class="time">
					<text>下单时间：{{order.createTime}}</text>
				</view> -->
			</view>
		</template>
	</view>
</template>

<script>
	import {
		goback
	} from "@/common/utils/navigateBack.js";
	import {
		Base64
	} from "@/common/utils/base64.js";
	import {
		isRead,
		detail,
		updatePageViews,
		articleQuery,
		getBySnAndFlag,
		queryMainInfo,
		queryCurrentByPortalColumnId,
		queryCompeteMain,
		queryWinResultByIdAndSuppId,
		getAnnouncementBySnAnd
	} from '../../api/message/message.js'
	export default {
		data() {
			return {
				id: '',
				articleType: '',
				newlyBuildForm: {},

				content: {},
				aftersaleData: {},
				orderData: [],
				biddingData: {},
				resultData: {},
				orderResultSn: '', // 结果公示的订单编号
				resultProductList: {},
				catalogSum: '',
				catalogSum: '',
				url: '',
				type: 'order', // order 正常的 bidding 竞价公告 parity 询价公告 result 询价结果/竞价结果

				summary: {
					num: 0,
					totalPrice: 0,
					freight: 0,
					amount: 0,
					amountDesc: 0
				},
				canHide: false,
				current: false,
				defaultImg: require('@/static/defaultImg.png')
			}
		},
		onLoad(op) {
			this.id = op.id
			this.articleType = op.articleType
			let param;

			if (op.current) {
				this.current = true
				param = {
					portalColumnId: this.$route.query.portalColumnId,
					tenantId: uni.getStorageSync('userInfo').tenantId,
				};
				this.url = "api/article/queryCurrentByPortalColumnId";
				this.getQueryCurrentByPortalColumnId(param)
			} else {
				this.current = false;
				this.flag = op.flag;
				param = {
					id: op.id,
					articleType: op.articleType,
				};
				// this.url = "api/article/query";
				this.getArticleQuery(param)
			}
			// this.loadData()
			// this.isRead()
			// this.update()

		},
		methods: {
			getArticleQuery(param) {
				articleQuery(param).then(res => {
					if (res.code == 0) {
						let data = res.data
						if (data.status == "01") {
							if (this.current == "1") {
								this.update(data.id);
							} else {
								this.update(param.id);
							}
						}
						// 返回系统用户处理
						this.content = data;
						this.content.createUser = this.content.createUser.slice(0, 1) + '**';
						// this.loadOrderItems(true);
						if (this.$route.query.colunmsName == '采购公告') {
							let orderSn = this.content.orderSn
							if (orderSn.split('-')[0] && orderSn.split('-')[0] == 'XBJ') {
								this.type = 'parity'
								this.title = '询价采购公告'
								this.getNoticeDetails(this.content.orderId);
							} else if (orderSn.split('-')[0] && orderSn.split('-')[0] == 'JJ') {
								this.title = '询价竞价公告'
								this.type = 'bidding'
								this.getNoticeBiddingDetails(this.content.orderId);
							} else {
								this.loadOrderData2()
							}

						} else if (this.$route.query.colunmsName == '结果公示') {
							let orderSn = this.content.orderSn
							if (orderSn.split('-')[0] && orderSn.split('-')[0] == 'XBJ') {
								this.title = '询价结果公示'
							} else if (orderSn.split('-')[0] == 'JJ') {
								this.title = '竞价结果公示'
							}
							this.type = 'result'
							this.getResultDetails(this.content)
						} else {
							this.loadOrderData2()
						}


						// this.getQueryOrderMaster(param);
						this.$nextTick(() => {
							document.getElementById("content").innerHTML =
								this.newlyBuildForm.content;
						})
						// 附件返回数据处理
						for (let i = 0; i < data.files.length; i++) {
							this.defaultFileList.push({
								uid: data.files[i].storageFileId,
								name: data.files[i].fileName,
								status: "done",
								// url: appConfig.microServ +
								// 	appConfig.microServModules.fsdsrest +
								// 	"api/fdfs/file/download?storage_file_id=" +
								// 	data.files[i].storageFileId,
							});
						}
					}
				})
			},
			getQueryCurrentByPortalColumnId(param) {
				queryCurrentByPortalColumnId(param).then(res => {
					if (res.code == 0) {
						let data = res.data
						if (data.status == "01") {
							if (this.current == "1") {
								this.update(data.id);
							} else {
								this.update(param.id);
							}
						}
						// 返回系统用户处理
						this.content = data;
						this.content.createUser = this.content.createUser.slice(0, 1) + '**';
						// this.loadOrderItems(true);
						if (this.$route.query.colunmsName == '采购公告') {
							let orderSn = this.content.orderSn
							if (orderSn.split('-')[0] && orderSn.split('-')[0] == 'XBJ') {
								this.type = 'parity'
								this.title = '询价采购公告'
								this.getNoticeDetails(this.content.orderId);
							} else if (orderSn.split('-')[0] && orderSn.split('-')[0] == 'JJ') {
								this.title = '询价竞价公告'
								this.type = 'bidding'
								this.getNoticeBiddingDetails(this.content.orderId);
							} else {
								this.loadOrderData2()
							}

						} else if (this.$route.query.colunmsName == '结果公示') {
							let orderSn = this.content.orderSn
							if (orderSn.split('-')[0] && orderSn.split('-')[0] == 'XBJ') {
								this.title = '询价结果公示'
							} else if (orderSn.split('-')[0] == 'JJ') {
								this.title = '竞价结果公示'
							}
							this.type = 'result'
							this.getResultDetails(this.content)
						} else {
							this.loadOrderData2()
						}


						// this.getQueryOrderMaster(param);
						this.$nextTick(() => {
							document.getElementById("content").innerHTML =
								this.newlyBuildForm.content;
						})
						// 附件返回数据处理
						for (let i = 0; i < data.files.length; i++) {
							this.defaultFileList.push({
								uid: data.files[i].storageFileId,
								name: data.files[i].fileName,
								status: "done",
								// url: appConfig.microServ +
								// 	appConfig.microServModules.fsdsrest +
								// 	"api/fdfs/file/download?storage_file_id=" +
								// 	data.files[i].storageFileId,
							});
						}
					}
				})
			},
			//控制商品盒子的显示隐藏
			isShowGood() {
				this.canHide = !this.canHide
			},
			getResultDetails(item) {
				let params = {
					inquiryId: item.orderId,
					supplierId: item.supplierId,
				}
				queryWinResultByIdAndSuppId(params).then(res => {
					if (res.code == 0) {
						let data = res.data
						this.resultData = data.inquiryInfo
						this.resultProductList = data.productList
						for (let i = 0; i < this.resultProductList.length; i++) {
							this.summary.totalPrice = this.resultProductList[i].totalPrice + this.summary
								.totalPrice
							this.summary.amount = this.summary.totalPrice
							this.resultData.supplierName = this.resultProductList[i].supplierName
						}
						this.getOrderSn(item)
					}
				})

			},
			getOrderSn(data) {
				console.log('data', data)
				for (let i = 0; i < this.resultData.orderList.length; i++) {
					console.log('this.resultData.orderList[i].supplierId', this.resultData.orderList[i].supplierId)
					if (this.resultData.orderList[i].supplierId == data.supplierId) {
						this.orderResultSn = this.resultData.orderList[i].sn
					}
				}
			},
			loadOrderData2() {
				getAnnouncementBySnAnd({
					sn: this.content.orderSn
				}).then(res => {
					if (res.code == 0) {
						this.orderData = res.data;
						let deptNameNew = this.orderData.master.deptFullName.split(',')
						let userNameNew = this.orderData.userName.slice(0, 1) + '**'
						this.orderData.deptNameNew = deptNameNew.length == 1 ? deptNameNew[0] : deptNameNew[1]
						this.orderData.userNameNew = userNameNew

						// this.EplusIsShow=this.orderData.protocolType=='eplus';
						// this.orderDelivered = this.orderData.status;
						// this.contractData = this.orderData.contractFileList;
						// this.contractData.forEach(row => {
						//   row.storageFileId = row.fileId
						//   row.fileIds = [row.fileId]
						// })
						// this.loadStepData();
						this.summaryData();
						let catalog = ''
						let length = this.orderData.items.length
						this.orderData.items.forEach(function(item, index) {
							item.key = item.id;
							let catalogArr = item.catalogFullName.split(',')
							catalog += catalogArr[0]
							if (length - 1 != index) {
								catalog += ' , '
							}

						});
						this.catalogSum = catalog
					} else {
						if (res.message) {
							uni.showToast({
								icon: "success",
								title: res.message
							})
						} else {
							this.$message.error("订单获取失败");
						}
					}
				})
			},
			getNoticeBiddingDetails(id) {
				let params = {
					id: id
				}
				queryCompeteMain(params).then(res => {
					if (res.code == 0) {
						let data = res.data
						this.biddingData = data
						for (let i = 0; i < this.biddingData.productList.length; i++) {
							this.summary.totalPrice = this.biddingData.productList[i].totalPrice + this.summary
								.totalPrice
							this.summary.amount = this.summary.totalPrice
						}

					}
				})
			},

			getNoticeDetails(id) {
				let params = {
					id: id
				}
				queryMainInfo(params).then(res => {
					if (res.code == 0) {
						let data = res.data
						this.biddingData = data
						for (let i = 0; i < this.biddingData.productList.length; i++) {
							this.summary.totalPrice = this.summary.totalPrice + this.biddingData.productList[i]
								.totalPrice
							this.summary.amount = this.summary.totalPrice
						}
					}
				})
			},
			loadData() {
				uni.showLoading({
					mask: true
				})
				articleQuery({
					id: this.id,
					articleType: this.articleType
				}).then(res => {
					uni.hideLoading()
					if (res.code === 0) {
						this.content = res.data
						this.getBySnAndFlagList()
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			getBySnAndFlagList() {
				getBySnAndFlag({
					sn: this.content.orderSn
				}).then(res => {
					if (res.code == 0) {
						this.orderData = res.data;
						let deptNameNew = this.orderData.master.deptFullName.split(',')
						let userNameNew = this.orderData.userName.slice(0, 1) + '**'
						this.orderData.deptNameNew = deptNameNew.length == 1 ? deptNameNew[0] : deptNameNew[1]
						this.orderData.userNameNew = userNameNew
						this.summaryData();
						let catalog = ''
						let length = this.orderData.items.length
						this.orderData.items.forEach(function(item, index) {
							item.key = item.id;
							let catalogArr = item.catalogFullName.split(',')
							catalog += catalogArr[0]
							if (length - 1 != index) {
								catalog += ' , '
							}

						});
						this.catalogSum = catalog
					}
				})
			},
			//数量汇总
			summaryData() {
				this.summary.freight = this.orderData.freight;
				this.summary.totalPrice = this.orderData.priceTotal;
				for (var i = 0; i < this.orderData.items.length; i++) {
					this.summary.num += this.orderData.items[i].num;

					if (this.orderData.items[i].salePrice < this.orderData.items[i].marketPrice) {
						this.summary.amountDesc += (this.orderData.items[i].marketPrice - this.orderData.items[i]
								.salePrice) * this
							.orderData.items[i].num;
					}
				}
				this.summary.amount = this.orderData.total;

			},
			returnIndex() {
				goback()
			},
			//已读
			isRead() {
				const params = {
					articleId: this.content.id
				}
				isRead(params).then(res => {
					console.log('res', res);
				})
			},
			update(id) {
				updatePageViews({
					id: id
				}).then(res => {

				})
			}
		}
	}
</script>

<style lang='scss'>
	.exp-list {
		margin: 20rpx;
		border-radius: 10rpx;
		background-color: #fff;
		padding: 20rpx;

		.title-list {
			font-weight: bold;
			// padding: 20rpx;
			padding-bottom: 10rpx;
			color: #000;
			font-size: 15px;

			//&::after {
			//  margin-left: 4rpx;
			//  content: '*';
			//  color: $base-color;
			//  font-size: 14px;
			//}
		}

		.content {
			margin-top: 20rpx;
			background: #f9f9f9;
			min-height: 140rpx;
			height: 140rpx;
			width: 100%;
			// margin: 20rpx;
			max-height: 200rpx;
			border-radius: 10rpx;
			padding: 20rpx;
			color: #303133;
			font-size: 14px;
			// border: 1px solid #d9d9d9;
		}

		.ph {
			font-size: 13px;
			color: #999;
		}
	}

	.info {
		padding: 30rpx;
		display: flex;
		flex-direction: column;

		.title {
			justify-content: center;
			align-items: center;
			text-align: center;
			font-size: $font-lg;
		}

		.hint {
			color: #646464;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10rpx 0;
		}

		.content {
			font-size: $font-base;
		}
	}

	.product-list {
		// padding: 10rpx;
		border-top: 1px solid $my-border-color-grey;
		border-bottom: 1px solid $my-border-color-grey;

		.showHide {
			display: flex;
			background-color: $my-bg-color;
			justify-content: center;
		}

		.item {
			display: flex;
			border-bottom: 1px solid $my-border-color-grey;
			background-color: $my-bg-color;
			padding: 10rpx 20rpx;

			&:last-child {
				border-bottom: none;
			}

			.left {
				width: 200rpx;
				height: 200rpx;
				margin-right: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.right {
				flex: 1;
				// width: 550rpx;
				display: flex;
				// justify-content: space-between;
				flex-direction: column;

				.name {
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					line-height: 40rpx;
					height: 80rpx;
					word-break: break-all;
				}

				.bottom {
					display: flex;
					margin-top: 14rpx;

					.price {
						display: flex;
						flex-direction: column;
						// color: $my-text-color-red;
						line-height: 32rpx;
					}

					.num {
						margin: auto;
						margin-right: 0;
						margin-top: 0;
					}
				}

				.action {
					margin-top: 14rpx;
					width: fit-content;
					height: fit-content;
					padding: 4rpx 16rpx;
					text-align: center;
					font-size: 12px;
					color: $font-color-dark;
					background: #fff;
					border-radius: 15px;
					border: 0.5px solid #C0C4CC;
				}
			}
		}
	}

	.total {
		// height: 300rpx;
		margin-top: 16rpx;
		padding: 20rpx 30rpx;
		background-color: $my-bg-color;

		.total-l {
			height: 52rpx;
			display: flex;
			align-items: center;

			.l-word {
				font-family: PingFangSC-Regular;
				color: #646464;
			}

			.l-p {
				margin: auto;
				margin-right: 0;
				// color: $my-text-color-red;

			}
		}

		.hideButton {
			height: 52rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #909090;

			.innerBox {
				width: 100rpx;
				text-align: center;
				border-radius: 15rpx;
				border: 1rpx solid #909090;
			}
		}

		.invoiceBox {
			.title {
				display: flex;
				justify-content: space-between;
				padding-bottom: 20rpx;
				font-size: $my-font-size-sm;
			}
		}

		.time {
			width: 100%;
			text-align: left;
			color: $my-text-color-grey;
		}
	}
</style>
